define(['backbone'], function(Backbone) {

	var DropMenu = Backbone.View.extend({
		el: '.com-header',
		initialize: function() {
			this.renderEls();
		},
		events: {
			'click #j_menu': 'evt_showMenu',
			'click #j_menu_close': 'evt_hideMenu'
		},
		renderEls: function() {
			this.els = {
				dropMenu: this.$('.com-dropmenu')
			}
		},
		evt_showMenu: function() {
			var _menu = this;
			this.els.dropMenu.animate({
				'opacity': 0,
				'translateY': '-100%'
			}, 0, function() {
				_menu.els.dropMenu.show().animate({
					'opacity': 1,
					'translateY': '0'
				}, 300, 'ease-out');
			});
			
		},
		evt_hideMenu: function() {
			var $dropMenu = this.els.dropMenu;
			$dropMenu.animate({
				'translateY': '-100%'
			}, 300, 'ease-in', function() {
				$dropMenu.hide();
			});
		}
	});

	return DropMenu;

});